<div class="taxonomy sm:max-w-[1000px] relative p-5">
  @let items = items$ | async;
  @let user = user$ | async;

  <div class="grid grid-cols-12 gap-5">
    <div class="col-span-12 sm:col-span-8 bg-gray-100 p-5 shadow rounded-xl relative">
      @if (loading()) {
        <div class="load">
          <app-loading />
        </div>
      }
      <mat-list class="relative">
        <div mat-subheader>{{ content.title }}</div>
        @if (items) {
          @for (item of items.data; track item.id; let last = $last) {
            @let attr = item.attributes;
            <mat-list-item lines="3">
              <mat-icon matListItemIcon>folder</mat-icon>
              <div matListItemTitle data-id="{{ attr.drupal_internal__tid }}">
                {{ attr.name | trim }}
              </div>
              @if (attr.description) {
                <span class="pl-1 pr-[160px] inline-block">
                  {{ attr.description.value | stripTags }}
                </span>
              }
              <div class="actions">
                <div class="flex gap-3">
                  <div (click)="onEdit(item)">
                    <app-btn
                      [content]="{
                        label: '编辑',
                        color: 'primary',
                        icon: { svg: 'pencil', inline: true },
                      }"
                    />
                  </div>
                  <app-btn
                    (click)="onDelete(item, user)"
                    [content]="{
                      label: '删除',
                      color: 'warn',
                      icon: { svg: 'delete-empty-outline' },
                    }"
                  />
                </div>
              </div>
            </mat-list-item>
            @if (!last) {
              <mat-divider></mat-divider>
            }
          }
        }
      </mat-list>
      @if (items?.links) {
        <app-pagination-links (pageChange)="onPageChange($event)" [links]="items.links" />
      }
    </div>
    <div class="col-span-12 sm:col-span-4 bg-white p-5 shadow rounded-xl">
      <div class="new my-5">
        <div class="flex flex-col gap-5">
          <app-formly [form]="form" [fields]="fields" [model]="model" />
          <div class="flex gap-4">
            <app-btn
              (click)="onUpdate(model, user)"
              [content]="{
                label: selectedItem ? '保存分类' : '新建分类',
                color: 'primary',
                mode: 'raised',
                icon: {
                  svg: 'pencil-plus',
                },
              }"
            />
            <app-btn
              (click)="onReset()"
              [content]="{
                label: '重置',
              }"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
